<template>
    <!-- pages/maker/bonus/index.wxml -->
    <view class="pages">
        <view class="custom-class custom-van-bg">
            <van-tabs type="card" :active="active" @change="onChange" title-active-color="#ffffff" title-inactive-color="#666666" nav-class="nav-class">
                <van-tab title="按日计算"></van-tab>
                <van-tab title="按周计算"></van-tab>
                <van-tab title="按月计算"></van-tab>
            </van-tabs>
        </view>

        <view class="custom-class mt-20">
            <view class="title-txt">
                {{ tabIndex == 2 ? '本月' : tabIndex == 1 ? '本周' : '今日' }}奖金池
                <text class="title-sub text-darkGrey">更新时间: {{ bounsData.time || '' }}</text>
            </view>
            <view class="flexs justify-between item-ft">
                <text>{{ bounsData.bonusPool || 0 }}</text>
                <text @tap="toToday">{{ bounsData.peopleNum || 0 }}</text>
            </view>
            <view class="flexs justify-between item-ft2">
                <text>奖金 (元)</text>
                <view class="item-today" @tap="toToday">
                    <text>达标 (人)</text>
                    <image src="/static/images/righticon.png"></image>
                </view>
            </view>
            <view class="title-txt">
                {{ tabIndex == 2 ? '上月' : tabIndex == 1 ? '上周' : '昨日' }}奖金池
                <text class="title-sub text-darkGrey">更新时间: {{ lastBounsData.time || '' }}</text>
            </view>
            <view class="flexs justify-between item-ft">
                <text>{{ lastBounsData.bonusPool || 0 }}</text>
                <text>{{ lastBounsData.peopleNum || 0 }}</text>
            </view>
            <view class="flexs justify-between item-ft2">
                <text>奖金 (元)</text>
                <text>达标 (人)</text>
            </view>
        </view>

        <view class="custom-class mt-20">
            <van-cell :title="(tabIndex == 2 ? '上月' : tabIndex == 1 ? '上周' : '昨日') + '奖金发放'" title-class="title-class" />
            <view class="flexs justify-between item-ft4">
                <text>创客信息</text>
                <text>奖金</text>
                <text>发放状态</text>
            </view>
            <block v-if="dataList.length > 0">
                <view :class="'flexs justify-between item-ft4 item-ft5 ' + (item.isYou == 1 ? 'item-bg' : '')" :data-item="item" v-for="(item, index) in dataList" :key="index">
                    <image :src="item.path"></image>

                    <text class="item-name">{{ item.nickname }}</text>

                    <text class="margin-left">{{ item.bonus }}</text>

                    <text :class="item.status == '待发放' ? 'text-red' : ''">{{ item.status }}</text>
                </view>
            </block>
            <block v-else>
                <view class="item-empty">
                    <image :src="iconEmpt" mode="aspectFit"></image>
                    <text>暂未有传奇创客达标，要加油了哦～</text>
                </view>
            </block>
        </view>
        <text class="item-rule" @tap="toDetail">分配规则</text>
    </view>
</template>

<script>
// pages/maker/bonus/index.js
import _request from '../../../utils/request.js';
import moment from '../../../utils/moment.min';
const app = getApp();
export default {
    data() {
        return {
            tabIndex: 0,
            bonusPool: 0,

            //奖金池
            peopleNum: 0,

            //达标人数
            bonus: 0,

            //奖金
            bounsData: {
                time: '',
                bonusPool: '',
                peopleNum: ''
            },

            lastBounsData: {
                time: '',
                bonusPool: '',
                peopleNum: ''
            },

            dataList: [],
            page: 0,
            totalRecords: 0,
            iconEmpt: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/2022-05-24/f1a73ad578b0444386fc0e76964e8ad4-files',
            userId: uni.getStorageSync('userid') || '',
            active: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.getData();
        this.getList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.setData({
            page: 0
        });
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.setData({
            page: ++this.page
        });
        this.getList();
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        toDetail() {
            uni.navigateTo({
                url: '../bonusrule/index'
            });
        },

        toToday() {
            uni.navigateTo({
                url: '../bonusToday/index?type=' + (this.tabIndex * 1 + 1)
            });
        },

        onChange(e) {
            this.setData({
                dataList: []
            });
            this.setData({
                tabIndex: e.detail.index,
                page: 0
            });
            this.getData();
            this.getList();
        },

        getData() {
            _request
                .get(
                    '/maker/bonusPool',
                    {
                        userId: uni.getStorageSync('userid'),
                        type: this.tabIndex * 1 + 1
                    },
                    app.globalData.userType
                )
                .then((res) => {
                    if (res.data.data) {
                        this.setData({
                            bounsData: res.data.data || {}
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });

            _request
                .get(
                    '/maker/lastBonusPool',
                    {
                        userId: uni.getStorageSync('userid'),
                        type: this.tabIndex * 1 + 1
                    },
                    app.globalData.userType
                )
                .then((res) => {
                    if (res.data.data) {
                        this.setData({
                            lastBounsData: res.data.data || {}
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        getList() {
            _request
                .get(
                    '/maker/lastBonusPoolUser',
                    {
                        userId: uni.getStorageSync('userid'),
                        type: this.tabIndex * 1 + 1,
                        page: this.page,
                        size: 15
                    },
                    app.globalData.userType
                )
                .then((res) => {
                    // console.log('-----', res);
                    if (res.data) {
                        let list = res.data.data || []; // for (let index = 0; index < 15; index++) {
                        //   list = [...res.data.data.rows, ...list];
                        // }

                        this.setData({
                            dataList: [...this.dataList, ...list]
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }
    }
};
</script>
<style>
/* pages/maker/bonus/index.wxss */
.pages {
    padding: 20rpx;
}
.custom-class {
    background: white;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    overflow: hidden;
}
.custom-van-bg {
    background: #eeeeee;
    border-radius: 34px;
}
.custom-class .van-tabs--card .van-tabs__wrap {
    height: 34px;
}
.van-tabs .van-tabs__nav--card {
    border: 0;
    background: transparent;
    height: 34px;
}
.van-tabs .van-tabs__scroll--card {
    margin: 0;
    background: transparent;
}
.van-tabs .van-tabs__scroll {
    margin: 0;
    background: transparent;
}
.van-tabs .van-tabs__nav--card .van-tab {
    border: 0;
}
.van-tabs .van-tabs__nav--card .van-ellipsis {
    line-height: 34px;
}
.van-tabs .van-tabs__nav--card .van-tab.van-tab--active {
    border-color: #ff8722;
    background: linear-gradient(270deg, #ffbc47 0%, #ff8722 100%);
    border-radius: 34rpx;
}

.title-txt {
    padding: 28rpx;
}

.title-txt .title-sub {
    font-size: 24rpx;
    margin-left: 24rpx;
}

.item-ft {
    padding: 10rpx 20rpx;
}

.item-ft text {
    display: flex;
    flex: 1;
    color: #ff8722;
    font-size: 20px;
    justify-content: center;
}

.title-class {
    font-size: 16px;
}

.item-ft text:not(:last-child) {
    border-right: 1px solid #d9d8db;
}

.item-ft2 {
    padding: 0rpx 20rpx 20rpx;
}
.item-ft2 text {
    display: flex;
    flex: 1;
    justify-content: center;
    color: #797979;
    font-size: 14px;
}

.item-ft3 {
    padding: 10rpx 40rpx 20rpx 40rpx;
    font-size: 13px;
}
.item-ft4 text {
    display: flex;
    flex: 1;
    justify-content: center;
    font-size: 14px;
    padding: 20rpx;
}
.item-ft4 text:first-child {
    justify-content: start;
    margin-left: 10rpx;
}
.item-ft5 {
    margin: 0 30rpx;
}
.item-ft5 text {
    justify-content: start;
    color: #666666;
}
.item-ft5 text:last-child {
    justify-content: center;
}
.item-ft5 .item-name {
    max-width: 200rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.item-ft5 image {
    margin-top: 10rpx;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    overflow: hidden;
}
.item-ft5:not(:last-child) {
    border-bottom: 1px solid #f8f8f9;
}
.item-bg {
    background: #ffecdc;
}
.item-empty {
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.item-empty image {
    height: 120px;
}
.item-empty text {
    text-align: center;
    color: #999999;
}
.item-rule {
    position: fixed;
    right: 0;
    top: 30%;
    color: white;
    width: 40rpx;
    background: rgba(68, 68, 68, 0.3);
    border-radius: 16px 0px 0px 16px;
    font-size: 28rpx;
    padding: 10px 5px;
}
.item-today {
    display: flex;
    justify-content: center;
    flex: 1;
}
.item-today text {
    flex: unset;
}
.item-today image {
    width: 20px;
    height: 20px;
}
.text-red {
    color: red;
}
</style>
